<div>
  <span class="brand" style="font-weight:bold;">{{paramFlowRuleDialog.title}}</span>
  <div class="card" style="margin-top: 20px;margin-bottom: 10px;">
    <div class="panel-body">
      <div class="clearfix">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label class="col-sm-2 control-label">资源名</label>
            <div class="col-sm-9">
              <input class="form-control" disabled="" ng-if="paramFlowRuleDialog.type == 'edit'" ng-model='currentRule.rule.resource'
                     placeholder="资源名" type="text"/>
              <input class="form-control highlight-border" ng-if="paramFlowRuleDialog.type == 'add'" ng-model='currentRule.rule.resource'
                     placeholder="资源名" required type="text"/>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">限流模式</label>
            <p class="col-sm-9 control-label" style="text-align: left; font-weight: normal;">QPS 模式</p>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">参数索引</label>
            <div class="col-sm-9">
              <input class="form-control highlight-border" ng-model='currentRule.rule.paramIdx' placeholder='请填入传入的热点参数的索引（从 0 开始）'
                     type="number"/>
            </div>
          </div>

          <div class="form-group">
            <div ng-if="!currentRule.rule.clusterMode">
              <label class="col-sm-2 control-label">单机阈值</label>
              <div class="col-sm-3">
                <input class="form-control highlight-border" ng-model='currentRule.rule.count' placeholder='单机阈值'
                       type="number"/>
              </div>
              <label class="col-sm-3 control-label" title="统计窗口时间长度，单位为 s">统计窗口时长</label>
              <div class="input-group col-sm-3">
                <input class="form-control highlight-border" min="1"
                       ng-model='currentRule.rule.durationInSec' placeholder='请填入统计窗口时长（单位为 秒）'
                       type="number"/>
                <span class="input-group-addon">秒</span>
              </div>
            </div>
            <div ng-if="currentRule.rule.clusterMode && currentRule.rule.clusterConfig.thresholdType == 0">
              <label class="col-sm-2 control-label">均摊阈值</label>
              <div class="col-sm-9">
                <input class="form-control highlight-border" ng-model='currentRule.rule.count' placeholder='集群均摊阈值'
                       type="number"/>
              </div>
            </div>
            <div ng-if="currentRule.rule.clusterMode && currentRule.rule.clusterConfig.thresholdType == 1">
              <label class="col-sm-2 control-label">集群阈值</label>
              <div class="col-sm-9">
                <input class="form-control highlight-border" ng-model='currentRule.rule.count' placeholder='集群总体阈值'
                       type="number"/>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">是否集群</label>
            <div class="col-sm-2">
              <input name="clusterMode" ng-model="currentRule.rule.clusterMode" type="checkbox">
            </div>
            <div ng-if="currentRule.rule.clusterMode">
              <label class="col-sm-3 control-label">集群阈值模式</label>
              <div class="col-sm-4">
                <div align="center" class="form-control highlight-border">
                  <input name="clusterThresholdType" ng-model='currentRule.rule.clusterConfig.thresholdType' type="radio"
                         value="0"/>&nbsp;单机均摊&nbsp;&nbsp;
                  <input name="clusterThresholdType" ng-model='currentRule.rule.clusterConfig.thresholdType' type="radio"
                         value="1"/>&nbsp;总体阈值
                </div>
              </div>
            </div>
          </div>

          <div class="form-group" ng-if="currentRule.rule.clusterMode">
            <label class="col-sm-2 control-label">失败退化</label>
            <div class="col-sm-8">
              <div class="checkbox-inline">
                <input name="fallbackToLocalWhenFail" ng-model="currentRule.rule.clusterConfig.fallbackToLocalWhenFail"
                       type="checkbox">
                <i class="glyphicon glyphicon-info-sign"></i>&nbsp;若选择，则 Token Server 不可用时将退化到单机限流
              </div>
            </div>
          </div>

          <!-- exclusion item part start -->
          <div ng-if="!paramFlowRuleDialog.showAdvanceButton">
            <hr/>
            <div class="form-group">
              <div class="form-group" style="text-align: center">
                <label class="control-label">参数例外项</label>
              </div>

              <div class="form-group">
                <label class="col-sm-2 control-label">参数类型</label>
                <div class="col-md-9">
                  <select class="form-control" ng-model="curExItem.classType"
                          ng-options="classType for classType in paramItemClassTypeList" placeholder="请选择参数类型">
                  </select>
                </div>
              </div>

              <div class="form-group">
                <label class="col-sm-2 control-label">参数值</label>
                <div class="col-md-3">
                  <input class="form-control" ng-model="curExItem.object" placeholder="例外项参数值" type="text">
                </div>

                <label class="col-sm-2 control-label">限流阈值</label>
                <div class="col-md-3">
                  <input class="form-control" ng-model="curExItem.count" placeholder="限流阈值" type="number">
                </div>

                <div class="col-md-2">
                  <button class="btn btn-success" ng-click="addParamItem()"
                          ng-disabled="notValidParamItem(curExItem)"
                          type="button">
                    <span class="fa fa-plus">&nbsp;添加</span>
                  </button>
                </div>
              </div>

              <div>
                <div class="col-md-12">
                  <table class="table table-condensed table-hover">
                    <thead>
                    <th>参数值</th>
                    <th>参数类型</th>
                    <th>限流阈值</th>
                    <th>操作</th>
                    </thead>
                    <tbody>
                    <tr ng-repeat="paramItem in currentRule.rule.paramFlowItemList">
                      <td><input class="form-control" ng-model="paramItem.object" placeholder="例外项参数" type="text"></td>
                      <td>
                        <p>{{paramItem.classType}}</p>
                      </td>
                      <td>
                        <input class="form-control" ng-model="paramItem.count" placeholder="限流阈值" type="number">
                      </td>
                      <td>
                        <button class="btn btn-danger" ng-click="removeParamItem(paramItem.object, paramItem.classType)"
                                type="button"><span
                          class="fa fa-trash-o">&nbsp;删除</span></button>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>

            </div>
          </div>

          <!-- exclusion item part end -->
          <div class="form-group text-center" ng-if="paramFlowRuleDialog.supportAdvanced">
            <a ng-click="onOpenAdvanceClick()" ng-if="paramFlowRuleDialog.showAdvanceButton" style="cursor: pointer;">高级选项</a>
            <a ng-click="onCloseAdvanceClick()" ng-if="!paramFlowRuleDialog.showAdvanceButton" style="cursor: pointer;">关闭高级选项</a>
          </div>
        </form>
      </div>
      <div class="separator"></div>
      <div clss="row" style="margin-top: 20px;">
        <button class="btn btn-outline-danger" ng-click="closeThisDialog()"
                style="float:right; height: 30px;font-size: 12px;margin-left: 10px;">取消
        </button>
        <button class="btn btn-outline-success" ng-click="saveRule()"
                style="float:right; height: 30px;font-size: 12px;margin-left: 10px;">{{paramFlowRuleDialog.confirmBtnText}}
        </button>
        <button class="btn btn-default" ng-click="saveRuleAndContinue()"
                ng-if="paramFlowRuleDialog.saveAndContinueBtnText"
                style="float:right; height: 30px;font-size: 12px;">{{paramFlowRuleDialog.saveAndContinueBtnText}}
        </button>
      </div>
    </div>
  </div>
</div>
